<template>
  <div class="wrap">
    <myHead :title="this.$route.query.title" :right-text-show="true" :right-text="this.$route.query.rightText"></myHead>
    <div class="box">
      <textarea name="" id=""  :rows="this.$route.query.rows" v-model="num" :placeholder="this.$route.query.placeholder"></textarea>
    </div>
    <div class="number">{{this.num.length}}/{{this.$route.query.maxLength}}</div>
  </div>
</template>

<script>
  import myHead from "./myHead";

  export default {
    name: "setMsg",
    components:{
      myHead
    },
    data(){
      return {
        num:this.$route.query.data,
      }
    },
    watch:{
      num(){
        if (this.num.length >= this.$route.query.maxLength) {
            this.num = this.num.substring(0,this.$route.query.maxLength)
        }
      }
    }
  }
</script>

<style scoped>
  .wrap {
    width: 100%;
    box-sizing: border-box;
    min-height: 6.67rem;
    padding-top: .5rem;
  }
  .box {
    padding: 0 .15rem;
  }
  textarea {
    width: 100%;
    box-sizing: border-box;
    padding: .15rem .1rem;
    resize: none;
    font-size:.15rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #333333;
    outline: none;
    border: none;
    border-bottom: .01rem solid #EEEEEE;
    margin-bottom: .1rem;
  }
  .number {
    font-size:.15rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #FF8C3C;
    text-align: right;
    padding: 0 .15rem;
  }
</style>
